import React, { Component } from 'react'
import PropTypes from 'prop-types'


export default class Vote_class extends Component {
  // 属性规则校验
  static defaultProps = {
    title: '投票',
    supNum: 0,
    oppNum: 0
  }

  static propTypes = {
    title: PropTypes.string.isRequired,
    supNum: PropTypes.number,
    oppNum: PropTypes.number

  }
  // 组件的初始状态
  state = {
    supNum: 0,
    oppNum: 0
  }

  componentDidMount() {
    console.log('第一次渲染完毕');
    
  }
  shouldComponentUpdate(nextProps,nextState){
    //nextState:存储要修改的最新状态
    //this.state:存储的还是修改前的状态[此时状态还是没有改变]
    console.log(this.state, nextState);
    return true  
  }
  componentWillUnmount(){
    //没有卸载组件,所以不执行
    console.log("componentWillUnmount");
    
  }
  render() {
    let { title } = this.props
    let { supNum, oppNum } = this.state
    console.log('组件渲染');
    


    return <div className='vote-box'>
      <div className='header'>
        <h1 ref='box-title'>{title}</h1>
        <span>{oppNum + supNum}人</span>
      </div>
      <div className='main'>
        <p>支持人数:{supNum}人</p>
        <p>支持人数:{oppNum}人</p>
      </div>
      <div className='footer'>
        <button onClick={() => { this.setState({supNum:supNum+1})}}>支持</button>
        <button onClick={() => { this.setState({oppNum:oppNum+1})}}>反对</button>

      </div>
    </div>

  }
}
